<!-- 修改AI金字塔 -->
<template>
	<view class="content">
		<view class="dropdown">
			<u-dropdown>
				<u-dropdown-item v-model="market" title="市场" :options="marketList" @change="changeMarket"></u-dropdown-item>
				<u-dropdown-item v-model="coin" title="币种" :options="coinList" @change="changeCoin"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="form">

			<view class="flex">
				<aqie-input placeholder="初始资金(USDT)" width="300" height='60' v-model="form.funding" @funding="funding" method='funding'></aqie-input>
				<aqie-input placeholder="首开数量" width="300" height='60' :value="form.firstNumber" @firstNumber="firstNumber" method='firstNumber'></aqie-input>
			</view>
			<view class="form-line flex">
				<view class="slide">
					<u-slider v-model="form.leverage5" :use-slot="true" min="25" max="100" step="25" round height="16" active-color='#FFB400'>
						<view class="">
							<view class="badge-button">
								{{form.leverage5/5}}x
							</view>
						</view>
					</u-slider>
				</view>
				<view class="right subsection">
					<u-subsection :list="directlist" mode="subsection" :current="current" @change="subsectionChange"
						active-color="#ff9900"></u-subsection>
				</view>
			</view>
			<view class="flex-w form-line">
				<aqie-input placeholder="最大补仓次数" width="300" height='60' :value="form.maxTimes" @maxTimes="maxTimes" method='maxTimes'></aqie-input>
				<aqie-input placeholder="平仓比例" width="300" height='60' :value="form.closeRate" @closeRate="closeRate" method='closeRate'></aqie-input>
				<aqie-input placeholder="阶梯一间隔" width="300" height='60' :value="form.openPriceOne" @openPriceOne="openPriceOne" method='openPriceOne'></aqie-input>
				<aqie-input placeholder="数量" width="300" height='60' :value="form.openNumOne" @openNumOne="openNumOne" method='openNumOne'></aqie-input>
				<aqie-input placeholder="阶梯二间隔" width="300" height='60' :value="form.openPriceTwo" @openPriceTwo="openPriceTwo" method='openPriceTwo'></aqie-input>
				<aqie-input placeholder="数量" width="300" height='60' :value="form.openNumTwo" @openNumTwo="openNumTwo" method='openNumTwo'></aqie-input>
				<aqie-input placeholder="阶梯三间隔" width="300" height='60' :value="form.openPriceThree" @openPriceThree="openPriceThree" method='openPriceThree'></aqie-input>
				<aqie-input placeholder="数量" width="300" height='60' :value="form.openNumThree" @openNumThree="openNumThree" method='openNumThree'></aqie-input>
				<aqie-input placeholder="区间上沿" width="300" height='60' :value="form.rangeUp" @rangeUp="rangeUp" method='rangeUp'></aqie-input>
				<aqie-input placeholder="区间下沿" width="300" height='60' :value="form.rangeDown" @rangeDown="rangeDown" method='rangeDown'></aqie-input>
			</view>
			<view class="flex-w form-line">
				<view class="form-item">
					<text>熔断保护</text>
					<u-switch v-model="form.isFuse" size=60 @change='fuseChange'></u-switch>
				</view>
				<view class="form-item">
					<text>AI趋势指标</text>
					<u-switch v-model="form.isTrend" size=60 @change='trendChange'></u-switch>
				</view>
				<view class="form-item">
					<text>错峰等待</text>
					<u-switch v-model="form.isAwait" size=60 @change='awaitChange'></u-switch>
				</view>
				<aqie-input placeholder="回撤比例" width="300" height='60' :value="form.awaitRetreatRate"  @awaitRetreatRate="awaitRetreatRate" method='awaitRetreatRate'></aqie-input>
				<view class="form-item">
					<text>追踪止盈</text>
					<u-switch v-model="form.isTrace" size=60 @change='traceChange'></u-switch>
				</view>
				<aqie-input placeholder="回撤比例" width="300" height='60' :value="form.traceRetreatRate"  @traceRetreatRate="traceRetreatRate" method='traceRetreatRate'></aqie-input>
			</view>
			<view class="btn">
				<u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle" @click="submitManual">完成
				</u-button>
			</view>
		
			
			
		</view>
	</view>
</template>

<script>
import {commonMixin} from '@/common/mixin/mixin.js'
import aqieInput from '@/components/base/aqie-input.vue';
export default {
	mixins: [commonMixin],
	onLoad(e){
		console.log('onLoad', e.id, e.type)
		this.id = e.id
		this.getDetail(this.id)
	},
	data () {
		return {
				id:0,
			  // dropdown
				market: 1,
				coin: 0,
				marketList: [],

				coinList: [],
			// form
				slideValue: 25,
				current: 0,
				customStyle: {
					color: '#fff',
					width: '686rpx',
					height: '90rpx',
					backgroundColor: '#1488FF'
				},
				directlist: [{
						name: "做多",
					},
					{
						name: "做空",
					},
				],
				checked:true
		};
	},

	components: {
		aqieInput
	},

	computed: {},

	mounted() {
		this.initMarket2()
	},

	methods: {
		getDetail(id) {
			this.$http.get(`app/t-ai-contract/${id}`).then(res => {
				this.form = res
				console.log(1, this.form, this.form.marketId, this.form.quoteCurrency)
				// 设置 market选中
				this.market = this.form.marketId
				console.log('当前市场id', this.market)
				this.initCoin2()
				
			})
		},
		
		submitManual(){		
				this.form.leverage = this.form.leverage5/ 5
				console.log('form 手动',this.form)
				
				this.$http.post('app/t-ai-contract', this.form).then(res => {
					console.log('submitManual', res)
				})
				uni.navigateBack({
						success: function() {}
				});
			},
	}
}

</script>
<style lang='scss' scoped>
	.content {
		padding: 20rpx 32rpx;

		.title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.u-subsection {
			margin: 20rpx 0 10rpx 0;
			height: 90rpx !important;

			/deep/.u-item-bg {
				height: 80rpx !important;
			}
		}

		.btn {

			margin: 32rpx auto;
		}

		.form {
			.slide {
				width: 50vw;
				margin-top: 30rpx;
				margin-right: 30rpx;
			}

			.form-line {
				// padding: 0 5rpx;
				.u-subsection {
					width: $w/2;
					margin: 40rpx 0 10rpx 0;
					height: 80rpx !important;
					border-radius: 40rpx;
					/deep/.u-item:nth-child(1){
						border-radius: 40rpx 0 0 40rpx;
					}
					/deep/.u-item:nth-child(2){
						border-radius: 0rpx 40rpx 40rpx 0rpx;
					}
					/deep/.u-item-bg {
						height: 80rpx;

					}
				}
				/deep/.input-block{
					margin-bottom: 10rpx;
				}
				.form-item{
					min-width:330rpx;
					display: flex;
					align-items: center;
					color: #333333;
					justify-content: space-between;
				}
			}

			.badge-button {
				padding: 4rpx 6rpx;
				background-color: #FFB400;
				color: #fff;
				border-radius: 10rpx;
				font-size: 22rpx;
				line-height: 1;
			}
		}
	}
</style>